/*
Image slider element
============================================
Defines the styles for the image slider element that is a part of the basic Shopware 5 shopping world elements.

The element can be added by using the Shopware 5 backend shopping world editor.

The element contains thumbnail image previews, navigation dots and navigation arrows to change the current active image.

It contains the viewport specific styles inside media queries.
*/

.image-slider {
    .clearfix();
    .backface-visibility(hidden);
    display: block;
    z-index: @zindex-image-slider;
    position: relative;
}

.image-slider--container {
    .unitize-height(200);
    .tap-highlight-color(rgba(0, 0, 0, 0));
    .backface-visibility(hidden);
    display: block;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;

    .arrow {
        .unitize-width(30);
        .unitize-height(70);
        .unitize(-35, 16, margin-top);
        .unitize(line-height, 68);
        .unitize(font-size, 16);
        .user-select(none);
        .touch-callout(none);
        .tap-highlight-color(rgba(0, 0, 0, 0));
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 50%;
        z-index: @zindex-image-slider-arrow;
        font-family: @sw-icon-fontname;
        text-align: center;
        color: @text-color;
        cursor: pointer;
        display: none;

        &.is--left {
            .unitize(left, 0);
            .border-radius-multi(0, 3px, 3px, 0);

            &:before,
            &::before {
                content: @sw-icon-arrow-left;
            }
        }

        &.is--right {
            .unitize(right, 0);
            .border-radius-multi(3px, 0, 0, 3px);

            &:before {
                content: @sw-icon-arrow-right;
            }
        }

        &:hover {
            color: @brand-primary;
            border-color: rgba(red(@brand-primary), green(@brand-primary), blue(@brand-primary), 0.5);
        }
    }

    &.is--dragging .image-slider--item {
        cursor: move;
    }
}

.image-slider--slide {
    .clearfix();
    .backface-visibility(hidden);
    display: block;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    white-space: nowrap;
    font-size: 0;
    -ms-touch-action: pan-y;
}

.image-slider--item {
    .backface-visibility(hidden);
    display: inline-block;
    height: 100%;
    width: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;

    .image--element {
        display: inline-block;
        max-width: 100%;
        height: 100%;
    }

    .image--media {
        margin: 0 auto;
        text-align: center;
    }
}

.image-slider--dots {
    .unitize-padding(10, 0);
    text-align: center;
}

.image-slider--thumbnails {
    .unitize-height(70);
    .unitize(top, 440);
    display: none;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    left: 0;

    .image-slider--thumbnails-slide {
        position: absolute;
        top: 0;
        left: 0;
    }

    .thumbnail--link {
        .unitize-width(70);
        .unitize-height(70);
        .unitize-padding(5, 5);
        .unitize-margin(0, 10, 0, 0);
        .unitize(line-height, 57);
        .border-radius();
        .tap-highlight-color();
        display: inline-block;
        text-align: center;
        border: 1px solid @border-color;

        &.is--active {
            border-color: @brand-primary;
        }
    }

    .thumbnail--image {
        display: inline;
        vertical-align: middle;
    }

    .thumbnails--arrow {
        .unitize-width(20);
        .unitize-height(70);
        .unitize(line-height, 70);
        .unitize(font-size, 14);
        .border-radius();
        .user-select(none);
        .touch-callout(none);
        .tap-highlight-color(rgba(0, 0, 0, 0));
        .linear-gradient(#ffffff, @gray-light);
        display: none;
        position: absolute;
        z-index: @zindex-image-slider-arrow;
        font-family: @sw-icon-fontname;
        text-align: center;
        color: @text-color;
        border: 1px solid rgba(255, 255, 255, 0.85);
        cursor: pointer;
        background: rgba(255, 255, 255, 0.85);

        &:hover {
            color: @brand-primary;
            border-color: rgba(red(@brand-primary), green(@brand-primary), blue(@brand-primary), 0.85);
        }

        &.is--top,
        &.is--bottom {
            .unitize(font-size, 8);
            .unitize-width(70);
            .unitize-height(24);
            .unitize-padding(2, 0, 0, 0);
            .unitize(line-height, 18);
            left: 0;
        }

        &.is--top {
            .border-radius-multi(0, 0, 3px, 3px);
            top: 0;

            &::before {
                content: @sw-icon-arrow-up;
            }
        }

        &.is--bottom {
            .border-radius-multi(3px, 3px, 0, 0);
            bottom: 0;

            &::before {
                content: @sw-icon-arrow-down;
            }
        }

        &.is--left {
            .border-radius-multi(0, 3px, 3px, 0);
            .unitize-width(24, 16);
            top: 0;
            left: 0;

            &::before {
                content: @sw-icon-arrow-left;
            }
        }

        &.is--right {
            .border-radius-multi(3px, 0, 0, 3px);
            .unitize-width(24, 16);
            top: 0;
            right: 0;

            &::before {
                content: @sw-icon-arrow-right;
            }
        }

        &.is--active {
            display: block;
        }
    }
}

@media screen and(min-width: @tabletViewportWidth) {

    .image-slider--container {
        .unitize-height(400);

        .arrow {
            display: block;
        }
    }
}

@media screen and (min-width: @tabletLandscapeViewportWidth) {

    .image-slider--thumbnails {
        display: block;
    }

    .image-slider--container {
        .unitize-height(400);
        .unitize(margin-bottom, 110);

        &.no--thumbnails {
            margin-bottom: 0;
        }

        &.no--image .image-slider--item {
            cursor: default;
        }
    }

    .image-slider--dots {
        .unitize(top, 405);
        position: absolute;
        width: 100%;
    }
}

@media screen and(min-width: @desktopViewportWidth) {

    .image-slider--container {
        .unitize-height(430);
        margin-bottom: 0;
    }

    .image-slider--thumbnails {
        .unitize-width(70);
        .unitize-height(430);
        .unitize-margin(0, 20, 0, 0);
        position: relative;
        top:0;
        left: 0;
        float: left;

        .thumbnail--link {
            .unitize-margin(0, 0, 20, 0);
            display: block;
        }
    }

    .image-slider--dots {
        .unitize-padding(10, 0, 10, 90);
        position: relative;
        top: auto;
        display: block;
    }
}
